.rp-combobox {
  position: relative;

  input {
    position: relative;
    z-index: 20;
  }

  &.active input {
    border-color: @midgray;
    .border-radius(5px, 0, 0, 5px);
  }

  ul.completions {
    position: absolute;
    top: 41px;
    left: 0;
    right: 0;
    padding: 10px;
    margin: 0;
    list-style-type: none;
    border: 1px solid @midgray;
    border-top: 1px solid @midgray;
    background-color: @white;
    .border-radius(0, 5px, 5px, 0);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 290px;
    z-index: 30;
    .user-select(none);

    li {
      width: auto;
      padding: 5px;
      .rounded(5px);
      cursor: default;
      white-space: nowrap;

      .additional {
        display: block;
        color: @darkgray;
        font-size: 12px;
      }
    }

    .cursor, li:hover {
      background-color: @midgray;

      .additional {
        color: @black;
      }
    }
  }

  .select {
    position: absolute;
    top: 1px;
    right: 1px;
    height: 40px;
    width: 40px;
    z-index: 25;
    .bw-gradient(@lightgray, 230, 245);
    .border-radius(4px, 4px, 0, 0);
    border-left: 1px solid @midgray;
    cursor: default;
    .transition-duration(0.2s);

    &:hover {
      .bw-gradient(@lightgray, 233, 248);
    }

    &:after {
      .virtualel;
      position: absolute;
      top: 50%;
      right: 50%;
      margin: -2px -3px 0 0;
      border-top: 5px solid @black;
      border-left: solid 4px transparent;
      border-right: solid 4px transparent;
    }
  }

  &.active .select {
    .border-radius(4px, 0, 0, 0);
    .bw-gradient(@lightgray, 245, 230);
  }

  &.rp-combobox-small {
    &.active input {
      border-color: @midgray;
      .border-radius(2px, 0, 0, 2px);
    }

    .form-control {
      font-size: inherit;
      height: 20px;
      padding: 0 4px;

      &:focus {
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px @{darkgray}");
      }
    }

    ul.completions {
      top: 19px;
      padding: 0;
      .border-radius(0, 5px, 5px, 0);
      max-height: 290px;

      li {
        padding: 2px 4px;
        .rounded(1px);
      }
    }

    .select {
      height: 18px;
      width: 22px;
      .border-radius(2px, 2px, 0, 0);

      &:after {
        .virtualel;
        margin: -1px -2px 0 0;
        border-top: 4px solid @black;
        border-left: solid 3px transparent;
        border-right: solid 3px transparent;
      }
    }

    &.active .select {
      .border-radius(2px, 0, 0, 0);
    }
  }
}
